<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>task12</title>
  <link rel="stylesheet" href="css/task12.css">
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>排名</th>
        <th>网站</th>
        <th>热度</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1.</td>
        <td>实现单双行列不同颜色，且前三行特殊表示的表格</td>
        <td>13000</td>
      </tr>
      <tr>
        <td>2.</td>
        <td>实现单双行列不同颜色，且前三行特殊表示的表格</td>
        <td>12000</td>
      </tr>
      <tr>
        <td>3.</td>
        <td>实现单双行列不同颜色，且前三行特殊表示的表格</td>
        <td>11000</td>
      </tr>
      <tr>
        <td>4.</td>
        <td>实现单双行列不同颜色，且前三行特殊表示的表格</td>
        <td>10000</td>
      </tr>
      <tr>
        <td>5.</td>
        <td>实现单双行列不同颜色，且前三行特殊表示的表格</td>
        <td>9000</td>
      </tr>
      <tr>
        <td>6.</td>
        <td>实现单双行列不同颜色，且前三行特殊表示的表格</td>
        <td>8000</td>
      </tr>
      <tr>
        <td>7.</td>
        <td>实现单双行列不同颜色，且前三行特殊表示的表格</td>
        <td>6000</td>
      </tr>
      <tr>
        <td>8.</td>
        <td>实现单双行列不同颜色，且前三行特殊表示的表格</td>
        <td>6000</td>
      </tr>
      <tr>
        <td>9.</td>
        <td>实现单双行列不同颜色，且前三行特殊表示的表格</td>
        <td>6000</td>
      </tr>
      <tr>
        <td>10.</td>
        <td>实现单双行列不同颜色，且前三行特殊表示的表格</td>
        <td>6000</td>
      </tr>
    </tbody>
  </table>

  <br>

  <input type="text">


  <div class="js-box">
    <div class="box">
      <div id="red" class="item red"></div>
      <div id="green" class="item green"></div>
      <div id="blue" class="item blue"></div>
    </div>
    <div class="btns">
      <a href="#red">1</a>
      <a href="#green">2</a>
      <a href="#blue">3</a>
    </div>
  </div>
</body>
</html>